<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>立体仓库管理系统v3</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .filter {
            padding: 10px;
            background-color: #f0f0f0;
            margin-bottom: 20px;
            display: flex;
            gap: 20px;
        }

        .view-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .rack-group {
            display: flex;
            gap: 15px;
            padding: 3px;
            border: 0px solid #ddd;
        }

        .group-title {
            font-weight: bold;
            color: #666;
			text-align: center
        }

        .row {
            display: flex;
            gap: 1px;
            justify-content: center;
        }

        .rack {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            transition: all 0.3s;
            cursor: pointer;
            flex-shrink: 0;
            font-size: 14px;
        }

        .rack.occupied { background-color: #888; color: white; }
        .rack.free { background-color: #4CAF50; color: white; }
    </style>
</head>
<body>
    <div class="filter">
        <div>
            视角：
            <select id="viewMode" onchange="updateFilter()">
                <option value="layer">按层查看</option>
                <option value="row">按排查看</option>
            </select>
        </div>
        <div id="filterContainer"></div>
    </div>

    <div id="warehouseDisplay"></div>

    <script>
        // 仓库数据定义（Z排-Y层-X列）
        let warehouses = [];
        for(let z=1; z<=10; z++) {       // 排
            for(let y=1; y<=5; y++) {   // 层
                for(let x=1; x<=40; x++) { // 列
                    warehouses.push({
                        name: `${z}-${y}-${x}`, // Z-Y-X格式
                        coordinateX: x,
                        coordinateY: y,
                        coordinateZ: z,
                        status: Math.random() > 0.9 ? 1 : 0
                    });
                }
            }
        }

        function updateFilter() {
            const viewMode = document.getElementById('viewMode').value;
            const container = document.getElementById('filterContainer');
            container.innerHTML = viewMode === 'layer' ? 
                '选择层：<select id="paramSelect" onchange="updateDisplay()">'+
                    Array.from({length:5},(_,i)=>`<option value="${5-i}">${5-i}层</option>`).join('')+
                '</select>' : 
                '选择排：<select id="paramSelect" onchange="updateDisplay()">'+
                    Array.from({length:10},(_,i)=>`<option value="${10-i}">${10-i}排</option>`).join('')+
                '</select>';
            updateDisplay();
        }

        function updateDisplay() {
            const viewMode = document.getElementById('viewMode').value;
            const param = document.getElementById('paramSelect')?.value || 1;
            const mainContainer = document.getElementById('warehouseDisplay');
            mainContainer.innerHTML = '';

            // 筛选数据
            const filtered = warehouses.filter(item => 
                viewMode === 'layer' ? 
                item.coordinateY == param : 
                item.coordinateZ == param
            );

            // 分组并倒序处理
            const groups = {};
            filtered.forEach(item => {
                const groupKey = viewMode === 'layer' ? item.coordinateZ : item.coordinateY;
                if(!groups[groupKey]) groups[groupKey] = [];
                groups[groupKey].push(item);
            });

            // 创建视图
            const viewContainer = document.createElement('div');
            viewContainer.className = 'view-container';
            
            // 获取排序后的组键（倒序）
            const sortedGroups = Object.keys(groups).sort((a,b) => {
                return viewMode === 'layer' ? 
                    b - a : // 按排查看时层倒序（5→1）
                    b - a;  // 按层查看时排倒序（3→1）
            });

            sortedGroups.forEach(groupKey => {
                const groupDiv = document.createElement('div');
                groupDiv.className = 'rack-group';
                
                // 组标题
                const title = document.createElement('div');
                title.className = 'group-title';
                title.textContent = viewMode === 'layer' ? 
                    `${groupKey}排` : 
                    `${groupKey}层`;
                groupDiv.appendChild(title);

                // 库位行（列保持正序）
                const rowDiv = document.createElement('div');
                rowDiv.className = 'row';
                
                groups[groupKey]
                    .sort((a,b) => a.coordinateX - b.coordinateX) // 列保持正序
                    .forEach(item => {
                        const rack = document.createElement('div');
                        rack.className = `rack ${item.status ? 'occupied' : 'free'}`;
                        rack.textContent = item.coordinateX; // 直接显示X
                        rack.title = `位置坐标：${item.name}\n状态：${item.status ? '不可用' : '可用'}`;
                        rowDiv.appendChild(rack);
                    });
                
                groupDiv.appendChild(rowDiv);
                viewContainer.appendChild(groupDiv);
            });

            mainContainer.appendChild(viewContainer);
        }

        // 初始化
        updateFilter();
    </script>
</body>
</html>